<style scoped>
  .flex-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .flex-form>div {
    min-width: 546px;
    margin-bottom: 16px;
  }

  .flex-form .line {
    height: 20px;
    border-top: 1px solid #cacaca;
    width: 100%;
  }

  .flex-form .title {
    width: 100%;
    padding-left: 16px;
  }

  .flex-form .dialog-form>div {
    margin-bottom: 18px;
  }

  .flex-form .dialog-form .el-form-item .el-form-item__content .el-form-item__error{
    left: 0;
  }

  .error-table {
    border: 1px solid #f56c6c;
  }

  .show-error {
    display: block;
    width: 100%;
    color: #f56c6c;
    margin-left: 16px;
  }

</style>
<style>
  .flex-form .upload-file.full {
    width: 100%;
  }

</style>
<template>
  <div class="tab_content">
    <div :class="(readonly?'read-only-form':'') + ' finance-class flex-form'">
      <div class="title">产品
        <el-button type="primary" icon="el-icon-plus" style="margin-left: 16px" @click="formShow = true;resetForm('ruleForm')" v-if="!readonly">新增</el-button>
      </div>
      <el-table :data="productList" border style="margin: 0 16px" :class="{'error-table' : isError}">
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteProduct(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="" v-if="isshow" prop="id"></el-table-column>
        <el-table-column label="产品名称" prop="product"></el-table-column>
        <el-table-column label="产品主要技术参数" prop="tecPara"></el-table-column>
        <el-table-column label="产品介绍" prop="productNotes"></el-table-column>
        <el-table-column label="产品附件">
          <template slot-scope="scope">
            <el-button type="text" @click="downloadFile(scope.row.productFileUrl, scope.row.productFileName)">{{scope.row.productFileName}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="年平均销售(万元)" prop="countMoney"></el-table-column>
        <el-table-column label="天供货能力" prop="dailySupply"></el-table-column>
        <el-table-column label="年供货能力" prop="yearlySupply"></el-table-column>
        <el-table-column label="产品一次性合格率" prop="qualityRate"></el-table-column>
      </el-table>
      <div v-if="isError" style="margin-top:16px; margin-bottom:0" :class="{'show-error': isError}">请添加产品</div>
      <div class="line"></div>
      <div class="title">专利
        <el-button type="primary" icon="el-icon-plus" style="margin-left: 16px" @click="patentShow = true;resetForm('patentForm')" v-if="!readonly">新增</el-button>
      </div>
      <el-table :data="patentList" border style="margin: 0 16px 16px 16px" :class="{'error-table' : isError2}">
        <el-table-column label="" v-if="isshow" prop="id"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="deletePatent(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="专利名称" prop="patentName"></el-table-column>
        <el-table-column label="专利编号" prop="patentCode"></el-table-column>
        <el-table-column label="附件">
          <template slot-scope="scope">
            <el-button type="text" @click="downloadFile(scope.row.patentFileUrl, scope.row.patentFileName)">{{scope.row.patentFileName}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="isError2" style="margin-bottom:16px" :class="{'show-error': isError2}">请添加专利</div>
      <!--添加产品-->
      <dialog-ext title="新增" v-model="formShow" @submitForm="submitForm" @resetDialog="resetForm('ruleForm')" width="800px">
        <el-form :model="form" ref="ruleForm" :rules="formRules" label-width="140px" class="dialog-form">
          <el-form-item label="" prop="id" v-if="isshow">
            <el-input v-model="form.id"></el-input>
          </el-form-item>
          <el-form-item label="产品名称" prop="product">
            <el-input v-model="form.product"></el-input>
          </el-form-item>
          <el-form-item label="主要技术参数" prop="tecPara">
            <el-input v-model="form.tecPara"></el-input>
          </el-form-item>
          <el-form-item label="产品介绍" prop="productNotes">
            <el-input v-model="form.productNotes"></el-input>
          </el-form-item>
          <el-form-item label="年平均销售" prop="countMoney">
            <el-input v-model="form.countMoney"></el-input>
          </el-form-item>
          <el-form-item label="天供货能力" prop="dailySupply">
            <el-input v-model="form.dailySupply"></el-input>
          </el-form-item>
          <el-form-item label="年供货能力" prop="yearlySupply">
            <el-input v-model="form.yearlySupply"></el-input>
          </el-form-item>
          <el-form-item label="产品一次性合格率" prop="qualityRate">
            <el-input v-model="form.qualityRate"></el-input>
          </el-form-item>
          <el-form-item label="上传附件">
            <el-upload class="upload-file full" ref="productFile" name="productFile" :action="lib.config.host.vendorMgt + '/vendormgt/questionary/product/uploadProductFile'"
              multiple :limit="1" :auto-upload="true" :data="{productFileUrl:'', productFileName:''}" :on-success="uploadFileSuccess">
              <el-button slot="trigger" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </dialog-ext>

      <!--添加专利-->
      <dialog-ext title="新增" v-model="patentShow" @submitForm="submitPatent" @resetDialog="resetForm('patentForm')" width="800px">
        <el-form :model="patent" ref="patentForm" label-width="140px" class="dialog-form">
          <el-form-item label="" prop="id" v-if="isshow">
            <el-input v-model="patent.id"></el-input>
          </el-form-item>
          <el-form-item label="产品名称" prop="patentName">
            <el-input v-model="patent.patentName"></el-input>
          </el-form-item>
          <el-form-item label="主要技术参数" prop="patentCode">
            <el-input v-model="patent.patentCode"></el-input>
          </el-form-item>
          <el-form-item label="上传附件">
            <el-upload class="upload-file full" ref="patentFile" name="patentFile" :action="lib.config.host.vendorMgt + '/vendormgt/questionary/patent/uploadPatentFile'"
              multiple :limit="1" :auto-upload="true" :data="{patentFileUrl:'', patentFileName:''}" :on-success="uploadPatentFileSuccess">
              <el-button slot="trigger" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </dialog-ext>
    </div>
  </div>
</template>
<script>
  import DialogExt from '../../../common/dialog-ext/dialog-ext';
  export default {
    data() {
      return {
        isshow: false,
        form: {
          id: '',
          product: '',
          tecPara: '',
          productNotes: '',
          countMoney: '',
          dailySupply: '',
          yearlySupply: '',
          qualityRate: '',
          certFlag: '',
          vendorName: '',
          industry: '',
          productFileName: '',
          productFileUrl: ''
        },
        patent: {
          id: '',
          patentName: '',
          patentCode: '',
          patentFileName: '',
          patentFileUrl: ''
        },
        formShow: false,
        patentShow: false,
        productList: [],
        patentList: [],
        isError: false,
        isError2: false,
        formRules:{
          product: [
            { required: true, message: '请输入产品名称', trigger: 'blur' }
          ],
          countMoney: [
            { required: true, message: '请输入年平均销售', trigger: 'blur' }
          ],
        }
      }
    },
    components: {
      DialogExt
    },
    created() {},
    props: {
      readonly: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      // downloadFile(url, filename) {
      //   downloadUtil.download(this.lib.config.host.vendorMgt + url, filename, {});
      // },
      initData(vendorId) {
        let _this = this;
        this.axios.post(this.lib.config.host.vendorMgt + '/vendormgt/questionary/product/query/' + vendorId).then((res) => {
          if (res.data.resultMap.product instanceof Array && res.data.resultMap.product.length > 0) {
            _this.productList = [];
            res.data.resultMap.product.forEach((item) => {
              let tempData = {};
              for (let key in _this.form) {
                if (item[key]) {
                  tempData[key] = item[key];
                }
              }
              _this.productList.push(tempData);
            });
          }
        });

        this.axios.post(this.lib.config.host.vendorMgt + '/vendormgt/questionary/patent/query/' + vendorId).then((res) => {
          if (res.data.resultMap.vdPatentList instanceof Array && res.data.resultMap.vdPatentList.length > 0) {
            _this.patentList = [];
            res.data.resultMap.vdPatentList.forEach((item) => {
              let tempData = {};
              for (let key in _this.patent) {
                if (item[key]) {
                  tempData[key] = item[key];
                }
              }
              _this.patentList.push(tempData);
            });
          }
        });
      },
      uploadFileSuccess(response, file, fileList) {
        this.form.id = response.resultMap.id;
        this.form.productFileName = response.resultMap.productFileName;
        this.form.productFileUrl = response.resultMap.productFileUrl;
      },
      uploadPatentFileSuccess(response, file, fileList) {
        this.patent.id = response.resultMap.id;
        this.patent.patentFileName = response.resultMap.patentFileName;
        this.patent.patentFileUrl = response.resultMap.patentFileUrl;
      },
      deleteProduct(index) {
        this.productList.splice(index, 1);
        this.checkList(1);
      },
      submitForm(callBack) {
        this.$refs.ruleForm.validate((valid)=>{
          if (valid) {
            this.productList.push(JSON.parse(JSON.stringify(this.form)));
            this.resetForm('ruleForm');
            this.form.productFileName = '';
            this.form.productFileUrl = '';
            this.form.id = '';
            this.checkList(1);
            callBack(true);
          }
        });
      },
      submitPatent(callBack) {
        this.patentList.push(JSON.parse(JSON.stringify(this.patent)));
        this.resetForm('patentForm');
        // this.checkList(2);
        callBack(true);
      },
      resetForm(ref) {
        if (this.$refs[ref]) {
          this.$refs[ref].resetFields();
          if (ref === 'ruleForm')
            this.$refs['productFile'].clearFiles();
          if (ref === 'patentForm')
            this.$refs['patentFile'].clearFiles();
        }
      },
      deletePatent(index) {
        this.patentList.splice(index, 1);
        // this.checkList(2);
      },
      getData(isCheck) {
        return new Promise((resolve, reject) => {
          resolve({
            data: {
              productJsonStr: JSON.stringify(this.productList),
              patentJsonStr: JSON.stringify(this.patentList)
            },
            check: isCheck ? this.checkList() : true
          });
        });
      },
      checkList(n) {
        let flag = true;
        if ((n === 1 || !n) && this.productList.length === 0) {
          this.isError = true;
          flag = false;
        } else {
          this.isError = false;
        }
        // if ((n === 2 || !n) && this.patentList.length === 0) {
        //   this.isError2 = true;
        //   flag = false;
        // } else {
        //   this.isError2 = false;
        // }
        return flag;
      }
    }
  }

</script>
